<template>
  <div class="con">
    <div class="titleBox">
      <span class="titleEl">智能电箱</span>
      <span class="numEL">50个</span>
    </div>
    <div class="echartsBox">
      <div class="echarts" id="electric7EchartsLeft"></div>
      <div class="echarts" id="electric7EchartsRight"></div>
    </div>
  </div>
</template>

<script>
export default {
  name: "electricBoxArea7",
  data() {
    return {
      data11: [
        { value: 18, name: "在线" },
        { value: 7, name: "离线" },
      ],
      optionLeft: {
        title: [
          {
            show: true,
            text: "36",
            textStyle: {
              color: "#0054bb",
              fontSize: "20px",
            },
            left: "42%",
            top: "38%",
          },
          {
            show: true,
            text: "在线电箱",
            textStyle: {
              color: "#0054bb",
              fontSize: "12px",
            },
            left: "37%",
            top: "46%",
          },
        ],

        tooltip: {
          trigger: "item",
        },
        legend: {
          bottom: "5%",
          left: "26%",
          orient: "vertical",
          textStyle: {
            color: "#ccc",
          },
          icon: "circle",
          formatter: (params) => {
            let target;
            for (let i = 0; i < this.data11.length; i++) {
              if (this.data11[i].name === params) {
                target = this.data11[i].value;
              }
            }
            let arr = [params + "\xa0\xa0\xa0\xa0" + target + "个"];
            return arr.join("");
          },
        },
        series: [
          {
            name: "在线",
            type: "pie",
            radius: ["60%", "50%"],
            avoidLabelOverlap: false,
            top: "-25px",
            label: {
              show: false,
              position: "center",
              color: "#ccc",
            },
            emphasis: {
              label: {
                show: false,
                fontSize: 40,
                fontWeight: "normal",
                // color:'#ccc'
              },
            },
            labelLine: {
              show: true,
            },
            data: [
              { value: 18, name: "在线" },
              { value: 7, name: "离线" },
            ],
          },
        ],
      },
      optionRight: {
        title: [
          {
            show: true,
            text: "36",
            textStyle: {
              color: "#0054bb",
              fontSize: "20px",
            },
            left: "42%",
            top: "38%",
          },
          {
            show: true,
            text: "在线电箱",
            textStyle: {
              color: "#0054bb",
              fontSize: "12px",
            },
            left: "37%",
            top: "46%",
          },
        ],

        tooltip: {
          trigger: "item",
        },
        legend: {
          bottom: "5%",
          left: "26%",
          orient: "vertical",
          textStyle: {
            color: "#ccc",
          },
          icon: "circle",
          formatter: (params) => {
            let target;
            for (let i = 0; i < this.data11.length; i++) {
              if (this.data11[i].name === params) {
                target = this.data11[i].value;
              }
            }
            let arr = [params + "\xa0\xa0\xa0\xa0" + target + "个"];
            return arr.join("");
          },
        },
        series: [
          {
            name: "在线",
            type: "pie",
            radius: ["60%", "50%"],
            avoidLabelOverlap: false,
            top: "-25px",
            label: {
              show: false,
              position: "center",
              color: "#ccc",
            },
            emphasis: {
              label: {
                show: false,
                fontSize: 40,
                fontWeight: "normal",
                // color:'#ccc'
              },
            },
            labelLine: {
              show: true,
            },
            data: [
              { value: 18, name: "在线" },
              { value: 7, name: "离线" },
            ],
          },
        ],
      },
    };
  },
  methods: {},
  mounted() {
    setTimeout(() => {
      const myChartsLeft = this.$echarts.init(
        document.getElementById("electric7EchartsLeft")
      );
      myChartsLeft.setOption(this.optionLeft);
      const myChartsRight = this.$echarts.init(
        document.getElementById("electric7EchartsRight")
      );
      myChartsRight.setOption(this.optionRight);
    }, 500);
  },
};
</script>

<style lang="scss" scoped>
.con {
  width: 450px;
  height: 245px;
  position: relative;
  .titleBox {
    position: absolute;
    right: 20px;
    .titleEl {
      color: rgb(56, 98, 183);
      font-size: 14px;
      margin-right: 10px;
    }
    .numEL {
      font-size: 14px;
    }
  }
  .echartsBox {
    display: flex;
    .echarts {
      width: 225px;
      height: 240px;
    }
  }
}
</style>